<template>
  <el-dialog width="1200px" title="新增收款" :visible.sync="dialogVisible" @close="handleClose">
    <el-form
      ref="submitForm"
      v-loading="formLoading"
      :model="submitForm"
      :rules="submitFormRules"
      label-width="100px"
      label-position="right"
      class="submit-form"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="收款日期" prop="receiptDate">
            <el-date-picker
              v-model="submitForm.receiptDate"
              style="width: 100%"
              type="date"
              placeholder="请选择收款日期"
              value-format="yyyy-MM-dd"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户" prop="customerId">
            <customer-query
              ref="customerQuery"
              :disabled="submitForm.id!==''"
              @choose="handleChooseCustomer"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款方式" prop="receiptMethod">
            <dict-select v-model="submitForm.receiptMethod" dict-key="payment_method" placeholder="请选择收款方式" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="submitForm.remark" type="textarea" placeholder="请输入备注" :autosize="{minRows:2}" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="submitForm.dataList"
      style="width: 100%"
      border
      @cell-mouse-enter="handleCellEnter"
      @cell-mouse-leave="handleCellLeave"
    >
      <!--          <el-table-column type="index" />-->
      <el-table-column label="订单编号" prop="orderNo" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.orderNo }}
        </template>
      </el-table-column>
      <el-table-column label="产品名称" prop="productName" min-width="200">
        <template slot-scope="scope">
          {{ scope.row.productName }}
        </template>
      </el-table-column>
      <el-table-column label="总数量" min-width="70">
        <template slot-scope="scope">
          {{ scope.row.orderQuantity }}{{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column label="单价" prop="unitPrice" min-width="80">
        <template slot-scope="scope">
          <money-format v-model="scope.row.unitPrice" />
        </template>
      </el-table-column>
      <el-table-column label="总金额" prop="orderAmount" min-width="100">
        <template slot-scope="scope">
          <money-format v-model="scope.row.orderAmount" />
        </template>
      </el-table-column>
      <el-table-column label="已付款" prop="paidAmount" min-width="100">
        <template slot-scope="scope">
          <money-format v-model="scope.row.paidAmount" />
        </template>
      </el-table-column>
      <el-table-column label="待付款" prop="remainingAmount" min-width="100">
        <template slot-scope="scope">
          <money-format v-model="scope.row.remainingAmount" />
        </template>
      </el-table-column>
      <el-table-column label="收款金额" prop="amount" min-width="80" style="background-color: #515a6e">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit"
            v-model="scope.row.amount"
            type="number"
            class="item"
            placeholder="请输入收款金额"
          />
          <div v-else class="txt">
            {{ scope.row.amount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" min-width="80">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit"
            v-model="scope.row.remark"
            class="item"
            placeholder="请输入备注"
          />
          <div v-else class="txt">
            {{ scope.row.remark }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="60">
        <template slot-scope="scope">
          <el-button type="text" style="color: #EC6E69" class="el-icon-delete" @click="removeOrder(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-button icon="el-icon-plus" plain style="width: 100%;" @click="showSaleOrder">添加订单</el-button>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="formLoading" type="text" @click="handleClose">取消</el-button>
      <el-button :loading="formLoading" type="primary" @click="handleSubmit">提交</el-button>
    </span>
    <div v-if="orderVisible">
      <sale-order-module ref="orderModule" multiple :query="{ paymentStateList: ['0','1'],orderStateList: ['0','1','2'], customerId: submitForm.customerId }" :visible="orderVisible" @close="closeOrderDialog" />
    </div>
  </el-dialog>
</template>

<script>
import { saveBatchReceipt } from '@/api/financial/receipt'
import moment from 'moment'
import saleOrderModule from '@/modules/saleOrderModule.vue'
/**
 * @author Administrator
 * @date 2023/5/7 19:05
 **/
export default {
  name: 'BatchSaveModule',
  components: { saleOrderModule },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      orderVisible: false,
      formLoading: false,
      columnNum: 3,
      submitForm: {
        id: '',
        receiptDate: moment(new Date()).format('YYYY-MM-DD'),
        customerId: '',
        receiptMethod: '',
        dataList: []
      },
      orderInfo: {},
      productInfo: {},
      submitFormRules: {
        receiptDate: [{ required: true, message: '请选择收款日期', trigger: 'change' }],
        customerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
        receiptMethod: [{ required: true, message: '请选择收款方式', trigger: 'change' }]
      }
    }
  },
  methods: {
    init() {
    },
    handleSubmit() {
      for (let i = 0; i < this.submitForm.dataList.length; i++) {
        var element = this.submitForm.dataList[i]
        if (element.amount === '' || element.amount < 0) {
          this.$message.error('请填写收款金额')
          return
        }
      }
      this.$refs.submitForm.validate((valid) => {
        if (valid) {
          this.formLoading = true
          saveBatchReceipt(this.submitForm).then(resp => {
            if (resp.success) {
              this.$message.success('操作成功')
              this.$refs.submitForm.resetFields()
              this.handleClose()
            }
          }).finally(() => {
            this.formLoading = false
          })
        }
      })
    },
    closeOrderDialog(dataList) {
      this.orderVisible = false
      if (dataList && dataList.length > 0) {
        for (let i = 0; i < dataList.length; i++) {
          const row = dataList[i]
          row.orderQuantity = row.quantity
          row.orderAmount = row.amount
          row.amount = ''
          row.orderId = row.id
          const customerIds = this.submitForm.dataList.map(e => e.customerId)
          const orderIds = this.submitForm.dataList.map(e => e.orderId)
          if (customerIds.length > 0 && customerIds.indexOf(row.customerId) === -1) {
            this.$message.error('只能选择相同客户的订单')
            return
          }
          if (orderIds.length > 0 && orderIds.indexOf(row.orderId) !== -1) {
            this.$message.error(`选择订单与第${orderIds.indexOf(row.orderId) + 1}条订单重复`)
            return
          }
          this.submitForm.dataList.push(row)
        }
      }
    },
    handleChooseCustomer(row) {
      if (row) {
        this.submitForm.customerId = row.id
      }
    },
    removeOrder(row) {
      this.$confirm('是否从订单列表中移除此订单', '移除提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitForm.dataList.splice(this.submitForm.dataList.indexOf(row), 1)
      })
    },
    showSaleOrder() {
      if (this.submitForm.customerId === '') {
        this.$message.error('请先选择客户')
        return
      }
      this.orderVisible = true
      this.$nextTick(() => {
        this.$refs.orderModule.doPage()
      })
    },
    handleClose() {
      this.$emit('close')
    },
    /** 鼠标移入cell */
    handleCellEnter(row, column, cell, event) {
      row.isEdit = true
    },
    /** 鼠标移出cell */
    handleCellLeave(row, column, cell, event) {
      row.isEdit = false
    }
  }
}
</script>

<style scoped>

</style>
